<template>
    <h2 style="text-align: center;">理财赎回</h2>
    <table class="table table-bordered">
     <thead>
         <tr>
            <td>理财编号</td>
            <td>理财名称</td>
            <td>年收益</td>
            <td>月收益</td>
            <td>最低金额</td>
            <td>风险等级</td>  
            <td>操作</td>
        </tr>
     </thead>
        <tbody>
         <tr v-for="item in info">
            <td>{{item.F_id}}</td>
            <td>{{item.F_name}}</td>
            <td>{{item.F_APY}}</td>
            <td>{{(item.F_APY/12).toFixed(2)}}%</td>
            <td>{{item.F_MinMoney.toFixed(2)}}CNY</td>
            <td>{{item.F_Level==0?"低风险":item.F_Level==1?"中风险":"高风险"}}</td>
            <td><a href="#" @click="UserFinanRemdeem(item.UF_Id)">赎回</a></td>
        </tr>
        </tbody>
    </table>

</template>


<script setup lang="ts">
import {ref,onMounted} from 'vue';

import axios from 'axios';

import {useUserStore} from '../../Store/Index.ts'


const useStore = useUserStore();
import {useRouter} from 'vue-router';

//获取当前路由的实例
const router = useRouter();

//创建响应式数据
const info = ref([{
F_id:0,
F_name:"",
F_APY:0,
F_MinMoney:0,
F_Number:0,
F_Level:0,
UF_Id:0
}])

//创建生命周期函数勾
onMounted(()=>{
LoadData();
})



 
const LoadData =()=>{
axios({
 url:"https://localhost:44337/api/Finans/ShowUserFinanInfo",
 method:"get",
 params:{
    Uid:useStore.Uid
 }
}).then((res)=>{
 console.log(res.data);
 info.value = res.data
})
.catch((err)=>{
 console.log(err);
})
}

//跳转到用户理财赎回页面
const UserFinanRemdeem=(UFid:number)=>{
     router.push({
        name:"AddUserFinanRemdeemPage",
        params:{
            UFid:UFid
        }
     })
}



</script>